<template>
    <div style="margin: 0px 0px 15px 0px">
        <Row type="flex" justify="space-between" class="header">
            <Col :span="12">
                <div>
                    <span>{{ $t("m.Language") }}:</span>
                    <Select
                        :value="language"
                        @on-change="onLangChange"
                        class="adjust"
                    >
                        <Option
                            v-for="item in languages"
                            :key="item"
                            :value="item"
                            >{{ item }}
                        </Option>
                    </Select>

                    <Tooltip
                        :content="
                            this.$i18n.t('m.Reset_to_default_code_definition')
                        "
                        placement="top"
                        style="margin-left: 10px"
                    >
                        <Button @click="onResetClick"
                            ><i
                                class="fa fa-refresh"
                                style="font-size: 0.2rem"
                                aria-hidden="true"
                            ></i>
                        </Button>
                    </Tooltip>

                    <Tooltip
                        :content="this.$i18n.t('m.Upload_file')"
                        placement="top"
                        style="margin-left: 10px"
                    >
                        <Button @click="onUploadFile">
                            <i
                                class="fa fa-upload"
                                style="font-size: 0.2rem"
                                aria-hidden="true"
                            ></i>
                        </Button>
                    </Tooltip>

                    <input
                        type="file"
                        id="file-uploader"
                        style="display: none"
                        @change="onUploadFileDone"
                    />
                </div>
            </Col>
            <Col :span="12">
                <div class="fl-right">
                    <span>{{ $t("m.Theme") }}:</span>
                    <Select
                        :value="theme"
                        @on-change="onThemeChange"
                        class="adjust"
                    >
                        <Option
                            v-for="item in themes"
                            :key="item.label"
                            :value="item.value"
                            >{{ item.label }}
                        </Option>
                    </Select>
                </div>
            </Col>
        </Row>
        <codemirror
            :value="value"
            :options="options"
            @change="onEditorCodeChange"
            ref="myEditor"
        >
        </codemirror>
    </div>
</template>
<script>
import utils from "@/utils/utils"

export default {
    name: "CodeMirror",
    components: {},
    props: {
        value: {
            type: String,
            default: ""
        },
        languages: {
            type: Array,
            default: () => {
                return ["C", "C++", "Java", "Python2"]
            }
        },
        language: {
            type: String,
            default: "C++"
        },
        theme: {
            type: String,
            default: "solarized"
        }
    },
    data() {
        return {
            options: {
                // codemirror options
                tabSize: 4,
                mode: "text/x-csrc",
                theme: "solarized",
                lineNumbers: true,
                line: true,
                // 代码折叠
                foldGutter: true,
                gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
                // 选中文本自动高亮，及高亮方式
                styleSelectedText: true,
                lineWrapping: true,
                highlightSelectionMatches: {
                    showToken: /\w/,
                    annotateScrollbar: true
                }
            },
            mode: {
                "C++": "text/x-csrc"
            },
            themes: [
                { label: this.$i18n.t("m.Monokai"), value: "monokai" },
                {
                    label: this.$i18n.t("m.Solarized_Light"),
                    value: "solarized"
                },
                { label: this.$i18n.t("m.Material"), value: "material" }
            ]
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            const languages = await utils.getLanguages()
            await new Promise(resolve => this.$nextTick(() => resolve()))
            let mode = {}
            languages.forEach(lang => {
                mode[lang.name] = lang.content_type
            })
            this.mode = mode
            this.editor.setOption("mode", this.mode[this.language])

            this.editor.focus()
        },
        onEditorCodeChange(newCode) {
            this.$emit("update:value", newCode)
        },
        onLangChange(newVal) {
            this.editor.setOption("mode", this.mode[newVal])
            this.$emit("changeLang", newVal)
        },
        onThemeChange(newTheme) {
            this.editor.setOption("theme", newTheme)
            this.$emit("changeTheme", newTheme)
        },
        onResetClick() {
            this.$emit("resetCode")
        },
        onUploadFile() {
            document.getElementById("file-uploader").click()
        },
        onUploadFileDone() {
            let f = document.getElementById("file-uploader").files[0]
            let fileReader = new window.FileReader()
            let self = this
            fileReader.onload = function(e) {
                var text = e.target.result
                self.editor.setValue(text)
                document.getElementById("file-uploader").value = ""
            }
            fileReader.readAsText(f, "UTF-8")
        }
    },
    computed: {
        editor() {
            console.log(this.$refs.myEditor)
            return this.$refs.myEditor.editor
        }
    },
    watch: {
        theme(newVal, oldVal) {
            this.editor.setOption("theme", newVal)
        }
    }
}
</script>

<style lang="less" scoped>
.header {
    margin: 5px 5px 15px 5px;
    .adjust {
        width: 150px;
        margin-left: 10px;
    }
    .fl-right {
        float: right;
    }
}
</style>

<style>
.CodeMirror {
    height: auto !important;
}
.CodeMirror-scroll {
    min-height: 300px;
    max-height: 1000px;
}
</style>
